<!--  -->
<template>
    <div class="bg">
        <div class="glass-container" id="glass" style="position: relative;left: 65%;top: 50%;translate:-20% -80%;">
            <h2>Registe</h2>
            <el-form :model="ruleForm" :rules="rules" label-width="120px">
                <el-form-item label="用户名" prop="username">
                    <el-input v-model="ruleForm.username" suffix-icon="UserFilled"/>
                </el-form-item>
                <el-form-item label="密码" prop="password">
                    <el-input v-model="ruleForm.password" suffix-icon="Edit"/>
                </el-form-item>
                <el-form-item label="再次输入密码" prop="passagain">
                    <el-input v-model="ruleForm.passagain" suffix-icon="Edit"/>
                </el-form-item>
                <el-form-item>
                    <el-button type="success" icon="Check" @click="regist()">
                        注册
                    </el-button>
                    &nbsp;&nbsp;&nbsp;
                    已有账号？ <router-link to="/login">点击登录</router-link>
                </el-form-item>
            </el-form>
        </div>
    </div>
  </template>
  
  <script>
  import axios from 'axios'
  export default {
    name: 'Registe',
    components: {},
    props: {},
    data() {
      return {
          ruleForm:{
              username:'',
              password:'',
              passagain:'',
          },
          rules:{
              username:[
                  {required: true, message:'输入用户名不能为空', trigger: 'blur'},
                  {pattern:/^\w{3,5}$/, message:'用户名长度为3-5位', trigger: 'change'},
                  {asyncValidator:(rule,value)=>{
                      return new Promise((resolve,reject)=>{
                          axios.get("http://localhost:8888/isexist",{params:{strname:this.ruleForm.username}})
                              .then((res)=>{
                                  if(res.data){
                                      reject('用户名已存在')
                                  }else{
                                      resolve()
                                  }
                              })
                      })
                  },trigger:'blur'}
              ],
              password:[
                  {required: true, message:'输入密码不能为空', trigger: 'blur'},
                  {pattern:/^\w{5-16}$/, message:'密码长度为5-16位', trigger: 'change'},
              ],
              passagain:[
                  {required: true, message:'再次输入密码不能为空', trigger: 'blur'},
                  {validator:(rule,value)=>{
                      return value == this.ruleForm.password
                  }, message:'两次输入密码不一致', trigger: 'change'},
              ]
          }
      }
    },
    computed: {},
    watch: {},
    methods: {
      regist(){
          if(this.ruleForm.username != '' && this.ruleForm.password != ''){
              axios.post("http://localhost:8888/regist",this.ruleForm)
              .then((res)=>{
                  if(res.data){
                      this.$router.push("/login")
                  }else{
                      alert('请选择你的唯一用户名')
                      this.ruleForm.username=''
                  }
              })
          }else{
              alert("请勿为空")
          }
      }
    },
    created() {},
    mounted() {}
  }
  </script>
  
  <style scoped>
  .bg{
    width: 100%;
    height: 100%;
    background:url(http://localhost:8888/cover/54c2025daa24471c805954cabe442a0c);
    background-size: cover;
    position: absolute;
  }

/* This was made with GlassGenerator.netlify.app */ 

.glass-container{
    width: 700px;
    height: 375px;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    border-radius: 18px;
    /* backdrop-filter: blur(18px); */
    background-color: rgba(163,228,250, 0.388);
    box-shadow: rgba(0, 0, 0, 0.3) 2px 8px 8px;
    border: 6px rgba(255,255,255,0.4) solid;
    border-bottom: 6px rgba(40,40,40,0.35) solid;
    border-right: 6px rgba(40,40,40,0.35) solid;
}
  </style>
  